<template>
	<layout>
		<div class="top">
			<el-input v-model="key" placeholder=""></el-input>
			<el-button-group>
				<el-button type="" @click="dialogFormVisible = true"
					>批量绑定角色</el-button
				>
				<el-button type="" @click="$router.push('/user/create')" v-if="$checkPermission(31)"
					>新增用户</el-button
				>
			</el-button-group>
		</div>
		<el-table
			:data="tableData"
			style="width: 100%"
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="id" label="ID"> </el-table-column>

			<el-table-column prop="username" label="账户"> </el-table-column>
			<el-table-column prop="nickname" label="昵称"> </el-table-column>
			<el-table-column prop="password" label="密码"> </el-table-column>
			<el-table-column prop="role" label="角色"> </el-table-column>
			<el-table-column style="width:150px;" label="操作" fixed="right">
				<template slot-scope="scope">
					<el-button
						size="small"
						type="text"
						@click="
							$router.push('/user/permission/' + scope.row.id)
						"
						>权限</el-button
					>
					<el-button
						size="small"
						type="text"
						@click="$router.push('/user/edit/' + scope.row.id)"
						>编辑</el-button
					>
					<el-button
						size="small"
						type="text"
						@click="handleDelete(scope.$index, scope.row)"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			stytle="margin:20px;"
			fixed="right"
			@current-change="getData"
			:current-page="currentPage"
			:page-size="2"
			layout="total,  prev, pager, next, jumper"
			:total="total"
		>
		</el-pagination>

		<el-dialog
			title="请选择需要绑定的角色"
			:visible.sync="dialogFormVisible"
		>
			<el-form>
				<el-form-item label="角色" :label-width="formLabelWidth">
					<el-select v-model="roleId" placeholder="请选择">
						<el-option
							v-for="(item, index) in permissions"
							:label="item.name"
							:value="item.id"
						>
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="batch">确 定</el-button>
			</div>
		</el-dialog>
	</layout>
</template>

<script>
export default {
	data() {
		return {
			tableData: [],
			permissions: [{}],
			key: '',
			total: 1,
			currentPage: 1,
			dialogFormVisible: false,
			formLabelWidth: '120px',
			roleId: '',
			username: [],
			roleIds: [],
		}
	},
	created() {
		this.getData()

		this.$http.get('/role/select').then((res) => {
			if (res.errcode == 0) {
				this.permissions = res.data
			}
		})
	},
	watch: {
		key(val) {
			this.getData()
		},
	},
	methods: {
		batch() {
			this.$http
				.post('user/role/update', {
					roleIds:[this.roleId],
                    userIds:this.userIds,
				})
				.then(res => {
                    //调接口成功就刷新页面
					if(res.errcode ==0){
                        this.getData()
                    }
                    this.back()
				})
		},

		//选择框
		handleSelectionChange(items) {
			this.userIds = items.map(item => item.id)
		},

		getData(page) {
			if (page) {
				this.currentPage = page
			}
			let path = `/user/page?currentPage=${this.currentPage}`
			if (this.key) {
				path = `/user/page?currentPage=${this.currentPage}&key=${this.key}`
			}

			this.$http.get(path).then((res) => {
				if (res.errcode == 0) {
					let data = res.data
					this.tableData = data.list //列表
					this.total = data.total //总共多少页
				}
			})
		},
		handleDelete(index, row) {
			this.$http
				.post('user/trash', {
					id: row.id,
				})
				.then((res) => {
					this.tableData.splice(index, 1)
				})
		},
	},
}
</script>

<style>
.top {
	display: flex;
	justify-content: space-between;
}
.el-input {
	width: 180px;
}
</style>
